<template>
    <div class="main">
        <div class="top_box" style="display: flex;align-items: center;justify-content: space-between;">
            <div style="display: flex;align-items: center;">
                <el-input style="width:200px;" placeholder="路段名称/路段编号" v-model="keyword"></el-input>

                <el-select style="width:200px;margin-left:20px" v-if="!(role==18||role==19)" v-model="admin_id" placeholder="请选择管理中心">
                    <el-option v-for="item in adminUserList" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
                <el-button type="primary" style="margin: 0 10px;" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
                <el-button style="margin: 0 10px;" size="small" @click="reset" type="primary">重置</el-button>
                <el-button type="warning" style="margin: 0 10px;" icon="el-icon-plus" size="small" @click="add">添加路段</el-button>
                <!-- <el-button type="primary" style="margin: 0 10px;">
                    <a download :href="downfile" class="aclass">下载导入模板</a></el-button> -->
                <!-- <el-upload-file :showfile="false" v-model="importindex" @click="getImportData()" accept=".xlsx"
                    style="margin: 0 10px;" title="导入"></el-upload-file> -->
                <!-- <el-button type="primary" icon="el-icon-upload" size="small" @click="exportdata()">导入</el-button> -->
            </div>
        </div>
        <!-- 表格 -->
        <el-table :data="data" style="width: 100%" border height="100%">
            <el-table-column prop="road_number" label="路段编号">
            </el-table-column>
            <el-table-column prop="nickname" label="管理中心名称">
            </el-table-column>
            <el-table-column prop="road_name" label="路段名称">
            </el-table-column>
            <el-table-column prop="longitude" label="经度">
            </el-table-column>
            <el-table-column prop="latitude" label="纬度">
            </el-table-column>
            <el-table-column prop="sort" label="排序">
            </el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="{row}">
                    {{ row.create_time | dateFormat }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{ row }">
                    <el-button type="warning" style="margin: 5px;" @click="del(row)">删除</el-button>
                    <el-button type="primary" style="margin: 5px;" @click="edit(row)">编辑</el-button>

                    <!-- <el-button type="success" style="margin: 5px;" @click="adddialog(row)">添加收费站/服务区</el-button> -->
                    <el-button type="danger" style="margin: 5px;" @click="getgridData(row.id)">收费站/服务区列表</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表单 -->
        <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" :title="formTitle" append-to-body width="950px" @close="formReset" :close-on-click-modal="false">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-row type="flex" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="管理中心" prop="admin_id">
                            <el-select v-model="form.admin_id" placeholder="请选择" :disabled="!(this.role == 16 || this.role == 20)">
                                <el-option v-for="item in adminUserList" :key="item.id" :label="item.nickname" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路段名称" prop="road_name">
                            <el-input v-model="form.road_name" placeholder="请输入路段名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路段编号" prop="road_name">
                            <el-input v-model="form.road_number" placeholder="请输入路段编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序" prop="sort">
                            <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div style="height:500px">
                            <mapQQ ref="mapQQ" :location.sync="form.location"></mapQQ>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top:20px">
                        <div style="height:500px">
                            <wangeditor :content.sync="form.content" ref="wangeditor"></wangeditor>
                        </div>
                    </el-col>
                    <el-row type="flex" justify="center" style="margin-top:20px;width:100%">
                        <el-button type="primary" @click="initiate()">发布</el-button>
                        <el-button @click="formReset()" type="primary">重置</el-button>
                    </el-row>
                </el-row>

            </el-form>
        </el-dialog>
        <el-dialog title="收费站/服务区列表" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="name" label="收费站/服务区名称"></el-table-column>
                <el-table-column property="nickname" label="管理中心"></el-table-column>
                <el-table-column property="road_number" label="路段编号"></el-table-column>
                <el-table-column property="type" label="类型">
                    <template slot-scope="{ row }">
                        {{ row.type == 1 ? '收费站' : '服务区' }}
                    </template>
                </el-table-column>

            </el-table>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
export default {

    components: {
        "mapQQ": () => import("@/components/map/index.vue"),
        "wangeditor": () => import("@/components/wangeditor.vue"),
        "el-upload-file": () => import("@/components/el-upload-file.vue"),
    },
    data() {
        return {
            formTitle: "添加",
            role: localStorage.getItem('role'),
            total: 0,
            limit: 20,
            page: 1,
            keyword: "",
            admin_id: "",
            dialogVisible: false,
            data: [],
            gridData: [],
            // downfile: '',//导入模板
            form: {
                admin_id: "",
                road_name: "",
                location: null,//地图所有数据
                content: '',
                road_number: '',
            },
            id: '',
            rowid: '',
            //管理中心列表
            adminUserList: [],
            importindex: [],//监视导入
            dialogTableVisible: false,
            adddialogFormVisible: false,
            rules: {
                admin_id: [
                    { required: true, message: '请选择管理中心', trigger: 'change' }
                ],
                road_name: [
                    { required: true, message: '请输入路段名称', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序数值', trigger: 'blur' },
                ],
                road_number: [
                    { required: true, message: '请输入路段编号', trigger: 'blur' }
                ],
            },
            ruleForm: {
                name: '',
                region: '',
            },
            rulesSF: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择类型', trigger: 'change' }
                ],
            },
        }
    },
    filters: {
        //过滤器 用于格式化时间
        dateFormat: function (value) {
            var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var year = date.getFullYear();
            var month = ("0" + (date.getMonth() + 1)).slice(-2);
            var sdate = ("0" + date.getDate()).slice(-2);
            var hour = ("0" + date.getHours()).slice(-2);
            var minute = ("0" + date.getMinutes()).slice(-2);
            var second = ("0" + date.getSeconds()).slice(-2);
            // 拼接
            var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
            // 返回
            return result;
        },
    },
    watch: {
        importindex() {
            this.getImportData()
            this.getInfo()
        },
    },
    methods: {
        // 获取表格初始数据
        getInfo(index = 1) {
            post({
                url: "/admin/answer.Road/index",
                data: {
                    page: index,
                    limit: this.limit,
                    keyword: this.keyword,
                    admin_id: this.admin_id
                },
                loading: true
            }).then(res => {
                this.total = res.total
                this.data = res.data
                console.log(res);
            })
        },
        adddialog(row) {
            this.adddialogFormVisible = true
            this.id = row.id
        },
        addgridData(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    post({
                        url: 'admin/answer.Road/act_edit',
                        data: {
                            name: this.ruleForm.name,
                            type: this.ruleForm.type,
                            road_id: this.id
                        }
                    }).then(res => {
                        this.adddialogFormVisible = false
                        this.getInfo()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 获取管理中心列表
        adminUser() {
            post({
                url: "/admin/answer.Subject/admin_list"
            }).then(res => {
                this.adminUserList = res
            })
        },
        //获取收费站列表
        getgridData(id) {
            this.dialogTableVisible = true
            post({
                url: '/admin/answer.Road/act_road',
                data: {
                    road_id: id
                }
            }).then(res => {
                this.gridData = res.data
            })
        },
        // 添加路段
        add() {
            this.formTitle = "添加"
            this.dialogVisible = true


            if (this.role == 16 || this.role == 20 || this.role == 1) {
                return
            } else {
                this.form.admin_id = localStorage.getItem('id') * 1
            }
        },
        //导入
        async getImportData() {
            console.log(this.importindex, 'this.importindex')
            await post({
                url: '/admin/customer.Customer/import_customer',
                data: {
                    file: this.importindex[0].url
                }
            })
            this.importindex = []
        },
        //下载导入模板
        // async getdownfile() {
        //     await post({
        //         url: '/admin/plan.Plan/import_formwork'
        //     }).then(res => {
        //         this.downfile = res.url
        //         console.log(this.downfile)
        //     })
        // },
        // 表单发布
        initiate() {
            // console.log(this.$refs.mapQQ);
            let longitude = this.form.location.lng
            let latitude = this.form.location.lat
            let content = this.form.content
            if (!latitude) {
                this.$message('请选择一个坐标');
                return
            }
            let { admin_id, road_name, road_number } = this.form
            console.log(latitude, longitude);
            // return
            this.$refs.form.validate((valid) => {
                if (valid) {
                    post({
                        url: "admin/answer.Road/edit",
                        data: {
                            ...this.form,
                            admin_id,
                            road_name,
                            longitude,
                            latitude,
                            content,
                            road_number,
                        },
                        loading: true,
                        successTip: true,
                    }).then(res => {
                        this.getInfo(this.page)
                    }).finally(() => {
                        this.dialogVisible = false
                    })

                }
            });
        },
        // 删除
        del(row) {
            this.$confirm('此操作将永久删除该路段, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                post({
                    url: "admin/answer.Road/del",
                    data: {
                        id: row.id
                    },
                    loading: true,
                    successTip: true,
                }).finally(() => {
                    this.getInfo()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 编辑
        edit(row) {
            this.formTitle = "编辑"
            this.form = {
                ...row, ...{
                    location: {
                        lat: row.latitude,
                        lng: row.longitude
                    }
                }
            }
            console.log(this.form)
            // this.$refs.wangeditor.html = row.content
            // this.$refs.mapQQ.lat = row.longitude
            // this.$refs.mapQQ.lng = row.latitude
            this.dialogVisible = true
        },
        // 重置
        reset() {
            this.keyword = ""
            this.admin_id = ""
            this.getInfo()
        },

        // 表单关闭回调
        formReset() {
            this.form = Object.assign({}, this.$options.data().form)
            this.$refs.wangeditor.html = ''
            this.$refs.mapQQ.lat = ""
            this.$refs.mapQQ.lng = ""

        },
    },
    computed: {
        comTime() {
            return (tiem) => {
                const d = new Date(tiem * 1000);
                let nian = d.getFullYear();
                let yue = d.getMonth();
                let ri = d.getDate();
                return `${nian}-${yue + 1}-${ri}`;
            };
        },
    },
    mounted() {
        this.getInfo()
        this.adminUser()
    },
}
</script>

<style scoped>
.aclass {
    text-decoration: none;
    color: #fff;
}
</style>